import React from 'react'
import Tab from 'lib/components/tab.jsx'
import View from './View.jsx'
import imgSrc from 'lib/util/ImageSource'
import Resizable from 'lib/components/Resizable.jsx';

export default class IOSSmartView extends View {
  constructor(props, context) {
    super(props, context);

    this.state.maxWidth = 100;
  }

  resizeImage(current) {
    if (this.state.maxWidth + 70 !== current.width) {
      this.setState({
        maxWidth: current.width - 70
      })
    }
  }

  render(){
    return (
      <Resizable onResize={ this.resizeImage.bind(this) }>
        <fieldset>
          <legend>1. 命名你的应用程序</legend>
          <div className="form-section">
            <p>Agent 安装成功后，你可以随时重命名你的应用程序</p>
            {
              this.renderForm()
            }
          </div>
        </fieldset>
        <fieldset>
          <legend>2. 配置.framework形式开发包</legend>
          <Tab>
            <Tab.Panel title='自动配置'>
              <div className="form-section">
                <ul className="form-ul">
                  <li>
                    <h5>(1) 在Podfile文件添加：</h5>
                    <code>{"pod 'OneAPM', '~> 2.2.4.0'"}</code>
                  </li>
                  <li>
                    <h5>(2) 在Podfile所在的文件夹下输入命令：</h5>
                    <code>{'$ Pod install'}</code>
                  </li>
                  <li>
                    <h5>(3) 安装好后就可以打开xcworkspace文件，在你的项目中使用OneAPM_iOS_SDK了</h5>
                    <code>{'$ open App.xcworkspace'}</code>
                  </li>
                </ul>
              </div>
            </Tab.Panel>
            <Tab.Panel title='手动配置'>
              <div className="form-section">
                <ul className="form-ul">
                  <li>
                    <h5>(1) 下载并解压 OneAPM iOS SDK</h5>
                    <p>下载最新版本的 iOS SDK:</p>
                    <p><a className="btn-download" download target="_blank" href="https://download.oneapm.com/ios_agent/iOS_SDK_latest_Xcode7.zip">
                        <i className="iconfont">&#xe650;</i>OneAPM_iOS_SDK
                      </a>
                    </p>
                  </li>
                  <li>
                    <h5>(2) 添加 OneAPM Framework 至 Xcode 项目中</h5>
                    <p>解压 SDK，并将「OneAPM.framework」文件夹从 Finder 中拖拽至 Xcode 项目中（悬停至导航窗口的项目中）。</p>
                    <p>出现提示窗口时，选择「Copy items into destination...」和「Create folder references...」。 </p>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/mi-ios-1.png')} />
                  </li>
                  <li>
                    <h5>(3) 在 Linker Settings 中添加以下 5 个 Libraries</h5>
                    <p>在项目导航窗口内点击你的 Project，并选中你的 App，然后选择「Build Phases」选项卡。</p>
                    <p>打开「Link Binary with Libraries」列表。</p>
                    <p>点击添加：</p>
                    <ul className="form-ul">
                      <li> ● <code>{'SystemConfiguration.framework'}</code></li>
                      <li> ● <code>{'CoreTelephony.framework'}</code></li>
                      <li> ● <code>{'CoreData.framework'}</code></li>
                      <li> ● <code>{'libz.tbd'}</code> \ <code>{'libz.dylib (Xcode6及以前版本）'}</code></li>
                      <li> ● <code>{'libstdc++.tbd'}</code> \ <code>{'libstdc++.dylib (Xcode6及以前版本）'}</code></li>
                    </ul>
                    <img style={{ maxWidth: this.state.maxWidth }} src={imgSrc('setup/mi-ios-2.png')} />
                  </li>
                </ul>
              </div>
            </Tab.Panel>
          </Tab>
        </fieldset>
        <fieldset>
          <legend>3. 引入SDK</legend>
          <div className="form-section">
            <p>在项目文件 [app_name]-Prefix.pch（通常在文件夹「Support Files」中）中，引入 OneAPM 头文件：</p>
            <code>{'#import <OneAPM/OneAPM.h>'}</code>
            <p>在文件 main.m 中添加如下代码:</p>
            <code>{'int main(int argc, char * argv[]) {'}<br/>
              <span style={{paddingLeft:'2em'}}>{'@autoreleasepool {'}</span><br/>
              <span style={{paddingLeft:'4em'}}>{'[OneAPM startWithApplicationToken: @ "' + this.getToken() + '"];'}</span><br/>
              <span style={{paddingLeft:'4em'}}>{'return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));'}</span><br/>
              <span style={{paddingLeft:'4em'}}>{'}'}</span><br/>
              {'}'}
            </code>
          </div>
        </fieldset>
        <fieldset>
          <legend>4. 运行应用程序并使用</legend>
          <div className="form-section">
            <p>Clean Project，并重新在模拟器或设备中启动应用程序，开始应用性能管理。</p>
            <code>{'(注：开发时若要使用“崩溃统计”功能，请选Release模式在真机上运行)'}</code>
            <p>请静候 1分钟，等待应用程序向 OneAPM 发送应用程序性能数据，即可开始使用 OneAPM 应用性能管理功能。</p>
          </div>
        </fieldset>
        <fieldset>
          <legend>5. 符号化表（dSYM文件）上传</legend>
          <div className="form-section last-form">
          <p>当应用列表可以显示出应用“包名”等信息后：</p>
          <ul className="form-ul">
            <li>a. 点击“崩溃”进入崩溃信息展示界面;</li>
            <li>b. 点击崩溃信息界面右上角“上传dSYM文件”按钮，选择APP版本号，选择要上传的dSYM文件"选取"，“保存”。</li>
          </ul>
          <a className="btn-blue" href="https://oneapm.kf5.com/posts/view/106712/" target="_blank">点击查看  上传dSYM文件 步骤</a>
          </div>
        </fieldset>
      </Resizable>
    )
  }
}
